<!doctype html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Hi-dialect</title>
   <link rel="stylesheet" href="css/style.css">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
</head>

<body>

    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!-- * Page loading -->

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="#" class="icon goBack">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">
            威廉
            <div class="text-muted">上次查看时间：24分钟前</div>
        </div>
        <div class="right">
            <a href="#" class="icon">
                <i class="icon ion-ios-call"></i>
            </a>
        </div>
    </div>
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent pt-2">

            <div class="chatItem">
				<a href="people-info.html">
					<img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
				</a>
                <div class="content">
                    <div class="bubble">
                        嗨，约翰，我们能尽快谈谈吗？
                    </div>
                    <footer>6分钟前</footer>
                </div>
            </div>

            <div class="chatItem user">
                <div class="content">
                    <div class="bubble">
                        当然.
                    </div>
                </div>
            </div>

            <div class="chatItem user">
                <div class="content">
                    <div class="bubble">
                        关于什么?
                    </div>
                    <footer>5分钟前</footer>
                </div>
            </div>

            <div class="chatItem">
				<a href="people-info.html">
					<img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
                </a>
				<div class="content">
                    <div class="bubble">
                        <img src="img/sample/photo3.jpg" alt="image" class="imageBlock xlarge rounded">
                    </div>
                    <footer>2分钟前</footer>
                </div>
            </div>
            

            <div class="chatItem">
				<a href="people-info.html">
					<img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
                </a>
				<div class="content">
                    <div class="bubble">
                        你能否教教我杭州话怎么形容这幅图?
                    </div>
                    <footer>1分钟前</footer>
                </div>
            </div>

            <div class="chatFooter">
                <div class="leftButton">
                    <button type="button" class="btn btn-secondary btn-icon">
                        <i class="icon ion-ios-camera"></i>
                    </button>
                </div>
                <form class="formArea">
                    <input type="text" class="form-control">
                    <button type="button" class="btn btn-primary btn-icon">
                        <i class="icon ion-ios-send"></i>
                    </button>
                </form>
            </div>

        </div>

    </div>
    <!-- appCapsule -->


 <!-- ///////////// Js Files ////////////////////  -->
 <!-- Jquery -->
 <script src="js/lib/jquery-3.4.1.min.js"></script>
 <!-- Bootstrap-->
 <script src="js/lib/popper.min.js"></script>
 <script src="js/lib/bootstrap.min.js"></script>
 <!-- Owl Carousel -->
 <script src="js/plugins/owl.carousel.min.js"></script>
 <!-- Main Js File -->
 <script src="js/app.js"></script>


</body>

</html>
